<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.进行表单非空验证-submit</title>
</head>
<body>
    <!-- Get方式：url?nickname=张三&password=123# -->
    <!-- 
        若按钮是type="submit"，则需要搭配onsubmit事件，将来根据函数的返回值决定表单是否提交;
        若函数返回的是true则提交表单，若返回的是false则不提交表单。
    -->
    <form action="#" method="get" onsubmit="return login();">
        <table border="1px" cellspacing="0" cellpadding="10px" align="center"> 
            <caption>登录界面</caption>
            <tr>
                <td>昵称</td>
                <td>
                    <input type="text" placeholder="请输入昵称" name="nickname" id="name">
                    <span class="nameMsg"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" placeholder="请输入密码" name="password" id="pwd">
                    <span class="pwdMsg"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录">&nbsp;&nbsp;
                    <input type="reset" value="重置">&nbsp;&nbsp;
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //登录函数，设置返回值，返回true则通过，可以提交表单；返回false则不通过，不可以提交表单
    function login(){
        //&  &&具备短路现象
        if(validateName() & validatePwd()){
            //提交表单
            return true;
        }
        //不提交表单
        return false;
    }

    //校验昵称是否为空，并提示
    function validateName(){
        //获取昵称输入框中的值
        let name = document.getElementById("name").value;
        //获取提示的span元素标签
        let nameMsg = document.querySelector(".nameMsg");
        if(name==null || name==''){
            nameMsg.innerHTML="<font style='color:red;font-size:12px;'>昵称不能为空</font>";
            return false;
        }else{
            nameMsg.innerHTML="<font style='color:green;font-size:12px;'>昵称通过</font>";
            return true;
        }
    }

    //校验密码是否为空，并提示
    function validatePwd(){
        let pwd = document.querySelector("#pwd").value;
        let pwdMsg = document.querySelector(".pwdMsg");
        if(pwd==null || pwd==''){
            pwdMsg.innerHTML="<font style='color:red;font-size:12px;'>密码不能为空</font>";
            return false;
        }else{
            pwdMsg.innerHTML="<font style='color:green;font-size:12px;'>密码通过</font>";
            return true;
        }
    }

</script>
</html>